<template>
  <div class="CouponList" ref="homePage">
    <div class="bj">
      <van-nav-bar title="优惠券" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div v-show="datalist.length == 0" class="wudingdan">
      <van-icon name="description" />
      <p>亲,暂无相关数据哦</p>
    </div>
    <div class="cpContent">
      <div class="item" v-for="(item,index) in datalist" :key="index">
        <div class="price">
          <p class="discountPrice">
            <span class="unit">￥</span> <span class="prc">{{item.Price}}</span>
          </p>
          <p class="originalPrice">
            <span class="unit">￥</span> <span class="prc">{{item.OriginalPrice}}</span>
          </p>
        </div>
        <!--price end-->
        <div class="itContent">
          <h3 class="tName"> <span class="yhqTy" v-if="item.yhqTypeRule">{{item.yhqTypeRule}}</span> {{item.Name}}</h3>
          <div class="time"> <span class="sTime">{{item.yhqBeginDate}}</span> — <span class="eTime">{{item.yhqEndDate}}</span></div>
          <div class="disc"> <span class="dc">{{item.yhqRuleTitle}}</span></div>
          <span class="buyBtn" @click="goBuy(item.gSN)">立即购买</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CouponList } from '@/api/home.js'
export default {
  data () {
    return {
      clintHeigth: '', // 获取页面高度
      datalist: []
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    this.CouponList();
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    CouponList () {
      let data = {
        'resSN': this.$route.query.resSN
      }
      CouponList(data).then(res => {
        console.log(res)
         this.datalist = res.List
      })
    },
    goBuy (gSN) {
      // console.log(gSN)
      let resSN = this.$route.query.resSN
      this.$router.push({
        path: '/CouponList/CouponOrder',
        query: {
          resSN: resSN,
          gSN: gSN
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.CouponList {
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .cpContent {
    padding: 0 15px;
    .item {
      border-radius: 8px;
      background: #fff;
      position: relative;
      margin-top: 15px;
      padding: 5px 15px 5px 115px;
      .price {
        position: absolute;
        width: 100px;
        background: #74bdb0;
        height: 100%;
        left: 0;
        bottom: 0;
        color: #fff;
        padding: 30px 10px 0 15px;
        border-radius: 8px 0 0 8px;
        .discountPrice {
          font-size: 32px;
          font-weight: 600;
          padding-bottom: 15px;
          .unit {
            font-size: 14px;
            padding-right: 5px;
            font-weight: normal;
          }
        }
        .originalPrice {
          text-decoration: line-through;
          font-size: 18px;
          font-weight: normal;
        }
      }
      .itContent {
        color: #333;
        overflow: hidden;
        text-align: left;
        padding-bottom: 8px;
        .yhqTy {
          font-size: 12px;
          font-weight: normal;
          background: #74bdb0;
          color: #fff;
          padding: 3px 8px;
        }
        .disc {
          padding: 5px 5px 0 0;
          font-size: 12px;
          color: #999;
        }
        .buyBtn {
          border: 1px solid #74bdb0;
          color: #74bdb0;
          font-size: 12px;
          text-align: center;
          padding: 3px 15px;
          border-radius: 15px;
          float: right;
        }
      }
    }
  }
}
</style>
